import { STEP_PET_MODULES_TYPE as MODULES_TYPE, usePetStore } from "@/store";

export function useStep() {
    const petStore = usePetStore();

    const steps = ref([
        {
            key: MODULES_TYPE.STEP_SELECT_PET_CATEGORY_TYPE,
            text: "选择宠物类型",
            height: "550rpx",
            icon: "pet"
        },
        {
            key: MODULES_TYPE.STEP_SELECT_PET_BREED,
            text: "选择宠物品种",
            height: "932rpx",
            icon: "pet"
        },
        {
            key: MODULES_TYPE.STEP_EDIT_PET_DETAILS,
            text: "填写宠物信息",
            height: "850rpx",
            icon: "pet"
        },
        {
            key: MODULES_TYPE.STEP_COMPLETE,
            text: "完成",
            height: "500rpx",
            icon: "pet"
        }
    ]);

    const swiperHeightStyle = computed(() => {
        return { height: steps.value[petStore.currentStep as number].height };
    });

    const onUpdateSwiper = ({ detail }: { detail: { current: number } }) => {
        petStore.updateCurrentStep(detail.current);
    };

    const onPreStep = () => {
        petStore.updateCurrentStep(petStore.currentStep - 1);
    };

    const onNextStep = () => {
        petStore.updateCurrentStep(petStore.currentStep + 1);
    };

    return {
        petStore,
        steps,

        stepClass: computed(() => {
            return (index: number) => {
                if (!isFinite(index)) {
                    return "unfinished"; // 处理无效输入
                }
                if (index < petStore.currentStep) {
                    return "finished";
                }
                if (index === petStore.currentStep) {
                    return "underway";
                }
                return "unfinished"; // 默认情况和index > currentStep.value的情况
            };
        }),

        swiperHeightStyle,

        onUpdateSwiper,
        onNextStep,
        onPreStep
    };
}
